<template>
  <n-config-provider :theme-overrides="themeOverrides" :locale="zhCN" :date-locale="dateZhCN">
    <n-dialog-provider>
      <n-message-provider>
        <n-layout v-if="is_userinfo">
          <n-layout-header>
            <HeaderBar />
          </n-layout-header>
          <n-layout has-sider>
            <Sider v-show="is_userinfo" />
            <n-layout-content class="content-warp">
              <router-view></router-view>
            </n-layout-content>
          </n-layout>
          <n-layout-footer>
            <Footer />
          </n-layout-footer>
        </n-layout>
        <n-layout v-else>
          <n-layout-header>
            <HeaderBar v-show="!is_preview"/>
          </n-layout-header>
          <n-layout-content class="content-warp">
            <router-view></router-view>
          </n-layout-content>
          <n-layout-footer>
            <Footer v-show="!is_preview"/>
          </n-layout-footer>
        </n-layout>
      </n-message-provider>
    </n-dialog-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import HeaderBar from "@/components/common/HeaderBar.vue";
import Sider from "@/components/common/Sider.vue";
import Footer from "@/components/common/Footer.vue";
import { userinfo } from '@/utils/userinfo'
import { zhCN, dateZhCN } from 'naive-ui'
import { ref, watch } from "vue";

let is_userinfo = ref(userinfo.in_userinfo)
let is_preview = ref(userinfo.in_preview)

const themeOverrides = {
  common: {
    primaryColor: "#5D6680",
    primaryColorHover: "#585958",
    primaryColorPressed: "#333333",
  },
};

watch(userinfo, () => {
  is_userinfo.value = userinfo.in_userinfo
  is_preview.value = userinfo.in_preview
})

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

/* 设置滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 16px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #58585b;
}

.outer-warp {
  height: 100vh;
  width: 100vw;
}

.content-warp {
  min-height: 96vh;
}
</style>
